<template>
    <div class="form-tab vertical-tab">
        <div class="tabs-content">
            <div class="list-content outer">
                <div class="content">
                    <div class="form">
                        <div class="form-item">
                            <pui-selector v-model="mainRef.selectorValue[0]" :dataList="mainRef.lineList"></pui-selector>
                            <pui-selector v-model="mainRef.selectorValue[1]" :dataList="mainRef.columnList"></pui-selector>
                        </div>
                        <div class="form-content">
                            <div class="form-item">
                                <div class="label">长度(μm):</div>
                                <input class="pui-input" v-model="mainRef.verticalData.length" type="text" placeholder="请输入" />
                            </div>
                            <div class="form-item">
                                <div class="label">划分段数:</div>
                                <input class="pui-input" v-model="mainRef.verticalData.hfds" type="text" placeholder="请输入" />
                            </div>
                            <!-- <pui-collapse>
                                <template>
                                    <div class="form-item">
                                        <div class="label">长度(μm):</div>
                                        <input class="pui-input" type="text" placeholder="请输入" />
                                    </div>
                                    <div class="form-item">
                                        <div class="label">划分段数:</div>
                                        <input class="pui-input" type="text" placeholder="请输入" />
                                    </div>
                                </template>
                            </pui-collapse> -->
                            <div class="form-item">
                                <div class="label">端面反射率</div>
                            </div>
                            <div class="form-item">
                                <div class="label" style="padding-left:20px;">R1:</div>
                                <input class="pui-input" v-model="mainRef.verticalData.r1" type="text" placeholder="请输入" />
                            </div>
                            <div class="form-item">
                                <div class="label" style="padding-left:20px;">R2:</div>
                                <input class="pui-input" v-model="mainRef.verticalData.r2" type="text" placeholder="请输入" />
                            </div>
                            <div class="form-item">
                                <div class="label">偏置电流(mA):</div>
                                <input class="pui-input" v-model="mainRef.verticalData.pzdl" type="text" placeholder="请输入" />
                            </div>
                            <div class="form-item">
                                <div class="label">偏注入效率:</div>
                                <input class="pui-input" v-model="mainRef.verticalData.effect" type="text" placeholder="请输入" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
    name: 'vertical-design',
})
</script>
<script lang="ts" setup>
import { reactive, getCurrentInstance, nextTick } from 'vue'
import ContextMenu from '../../MenuContext'
const { proxy } = getCurrentInstance() as any
const emit = defineEmits({
    'showSetting': (val: any) => {},
})
const mainRef = reactive({
    isActive: false,
    isDisabled: false,
    nowTabIndex: '0',
    selectorValue: ['Line1', 'Column1'],
    verticalData: {
        length: 500,
        hfds: 50,
        r1: 0.31,
        r2: 0.31,
        pzdl: 100,
        effect: 0.9,
    },
    lineList: [
        {
            label: 'Line1',
            value: 'Line1',
        },
        {
            label: 'Line2',
            value: 'Line2',
        },
        {
            label: 'Line3',
            value: 'Line3',
        },
    ],
    columnList: [
        {
            label: 'Column1',
            value: 'Column1',
        },
        {
            label: 'Column2',
            value: 'Column2',
        },
        {
            label: 'Column3',
            value: 'Column3',
        },
    ],
})
const tabClickHandle = (e: any) => {
    mainRef.nowTabIndex = e.id
}
const showContextMenu = (e: any) => {
    const menuList = [
        {
            label: '编辑对象属性',
            type: 'edit',
            fn: () => {
            }
        },
        {
            label: '删除',
            type: 'delete',
            fn: () => {
            }
        }
    ]
    e.preventDefault()
    ContextMenu(e, menuList)
}
const init = () => {
}
defineExpose({
    init
})
</script>


<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.button {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0.25rem;
  background-color: #ccc;
  color: #409EFF;
}

.menu {
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 0.25rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}

.menu-item {
  padding: 0.5rem 1rem;
  cursor: pointer;
}

.dropdown-menu--bottom-end {
  margin-top: 0.5rem;
  margin-right: 0;
}
</style>